<template>
    <div>
        <h4>添加页面</h4>
<table>
    <tr>
        <td>姓名</td>
        <td><input type="text" v-model="data.name"></td>
    </tr>
    <tr>
        <td>年龄</td>
        <td><input type="text" v-model="data.age" ></td>
    </tr>
    <tr>
        <td>性别</td>
        <td><input type="radio":value="1" name=1 v-model="data.sex">男
            <input type="radio":value="2" name=1 v-model="data.sex" >女</td>
    </tr>
    <tr>
        <td>生日</td>
        <td><input type="date" v-model="data.birthday" ></td>
    </tr>
    <tr>
        <td>等级</td>
        <td><select  v-model="data.mid" >
            <option value="0">请选择</option>
            <option v-for="d in sele":value="d.mid"  >{{d.mname}}</option>
        </select></td>
    </tr>
    <tr>
        <td>图片</td>
        <td><input type="file" @change="upload" >
            <img :src="'https://localhost:7183/'+data.img" alt="" width="140px" height="140px" >
        </td>
    </tr>
    <tr>
        <td>状态</td>
        <td><input type="checkbox" name="a" v-model="data.state" >勾选时为启用</td>
    </tr>
    <tr>
        <td><input type="button" @click="Add" value="添加" ></td>
    </tr>
    
    
</table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios"
import router from '@/router';
const  data=ref({
"name": "",
"age": 0,
"sex": 0,
"birthday": "",
//"createtime": "2025-04-04T08:49:36.069Z",
"mid": 0,
"img": "",
"state": true,
//"isdele": true
})
const  sele=ref([{
     "mid": 1,
    "mname": "VIP"
}])
onMounted(()=>{
    selep();
})
const  upload=(e:any)=>{
var path=e.target.files[0]
var tu=new FormData()
tu.append("file",path)
if(path.size>2*1024*1024)
{
    alert('不能上传大于2MB的图片')
    return;
}
if(path.type!="image/jpeg"&&path.type!="image/png")
{
    alert('图片不是jpg和png格式')
    return;
}
axios.post("https://localhost:7183/api/User/upload",tu).then(res=>{
data.value.img=res.data
})
}
const selep=()=>{
    axios.get("https://localhost:7183/api/User/sele").then(res=>{
        sele.value=res.data
    })
}
const Add=()=>{
    axios.post("https://localhost:7183/api/User/Add",data.value).then(res=>{
        if(res.data>0)
    {
        alert('添加成功')
        router.push({path:"/list"})
    }
    else
    {
        alert('添加失败')
    }
    })
}
</script>

<style scoped>

</style>